{% extends 'base.html' %}
{% block title %}主页{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for('static', filename='fontawesome/css/all.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-table/dist/bootstrap-table.css') }}">
    <script src="{{ url_for('static', filename='bootstrap-table/dist/bootstrap-table.js') }}"></script>
    <script src="{{ url_for('static', filename='bootstrap-table/dist/locale/bootstrap-table-zh-CN.js') }}"></script>
{% endblock %}
{% block content %}
    <form id="PForm" action="{{ url_for('home.insert') }}" method="post">
        <div class="row">
            <div class="col">
                <label for="PassengerId">乘客编号</label>
                <input type="number" min=1 class="form-control" id="PassengerId" placeholder="PassengerId" name="PassengerId">
            </div>
            <div class="col">
                <label for="Survived">幸存情况</label>
                <select class="form-control" id="Survived" name="Survived">
                    <option value=""></option>
                    <option value="True">True</option>
                    <option value="False">False</option>
                </select>
            </div>
            <div class="col">
                <label for="Pclass">等级</label>
                <select class="form-control" id="Pclass" name="Pclass">
                    <option value=""></option>
                    <option value=1>1</option>
                    <option value=2>2</option>
                    <option value=3>3</option>
                </select>
            </div>
            <div class="col">
                <label for="Name">姓名</label>
                <input type="text" class="form-control" id="Name" placeholder="Name" name="Name">
            </div>
            <div class="col">
                <label for="Sex">性别</label>
                <select class="form-control" id="Sex" name="Sex">
                    <option value=""></option>
                    <option value="male">male</option>
                    <option value="female">female</option>
                </select>
            </div>
            <div class="col">
                <label for="Age">年龄</label>
                <input type="number" min=0 class="form-control" id="Age" placeholder="Age" name="Age">
            </div>
            <div class="col">
                <label for="SibSp">姊妹个数</label>
                <input type="number" min=0 class="form-control" id="SibSp" placeholder="SibSp" name="SibSp">
            </div>
            <div class="col">
                <label for="Parch">亲属个数</label>
                <input type="number" min=0 class="form-control" id="Parch" placeholder="Parch" name="Parch">
            </div>
            <div class="col">
                <label for="Ticket">船票信息</label>
                <input type="text" class="form-control" id="Ticket" placeholder="Ticket" name="Ticket">
            </div>
            <div class="col">
                <label for="Fare">票价</label>
                <input type="number" min=0 max=512 class="form-control" id="Fare" placeholder="Fare" name="Fare">
            </div>
            <div class="col">
                <label for="Cabin">客舱号</label>
                <input type="text" class="form-control" id="Cabin" placeholder="Cabin" name="Cabin">
            </div>
            <div class="col">
                <label for="Embarked">登船港口</label>
                <select class="form-control" id="Embarked" name="Embarked">
                    <option value=""></option>
                    <option value="C">C</option>
                    <option value="S">S</option>
                    <option value="Q">Q</option>
                </select>
            </div>
        </div>
        <div class="row">
            <div class="btn-group col-3">
                <button type="submit" class="btn btn-primary" id="insert">添加</button>
                <button type="button" class="btn btn-success" id="save">保存</button>
                <button type="button" class="btn btn-danger" id="delete">删除</button>
            </div>
            <div class="col-6"></div>
            <div class="btn-group col-3">
                <button type="button" class="btn btn-info" id="search">查询</button>
                <button type="button" class="btn btn-warning" id="clear">清空</button>
                <a class="btn btn-dark" href="{{ url_for('home.stats') }}">统计</a>
            </div>
        </div>
    </form>
    <p class="text-danger">{{ error }}</p>
    <table class="table table-striped table-hover" data-locale="zh-CN"></table>
{% endblock %}
{% block js_tail %}
    <script>
        function table() {
            $('table').bootstrapTable('destroy').bootstrapTable({
                url: "{{ url_for('home.details') }}",
                method: 'get',
                dataType: 'json',
                pagination: true,
                singleSelect: false,
                toolbar: '#toolbar',
                striped: true,
                cache: true,
                pageNumber: 1,
                pageSize: 10,
                pageList: [10, 30, 50, 100],
                locale: 'zh-CN',
                showColumns: true,
                showRefresh: true,
                showToggle: true,
                cardView: false,
                clickToSelect: true,
                sidePagination: 'client',
                columns: [{
                    checkbox: true,
                    visible: true
                }, {
                    field: 'PassengerId',
                    title: '乘客编号',
                    sortable: true,
                    align: 'center'
                }, {
                    field: 'Survived',
                    title: '幸存情况',
                    sortable: true,
                    align: 'center'
                }, {
                    field: 'Pclass',
                    title: '等级',
                    sortable: true,
                    align: 'center'
                }, {
                    field: 'Name',
                    title: '姓名',
                    sortable: true,
                    align: 'center'
                }, {
                    field: 'Sex',
                    title: '性别',
                    sortable: true,
                    align: 'center'
                }, {
                    field: 'Age',
                    title: '年龄',
                    sortable: true,
                    align: 'center'
                }, {
                    field: 'SibSp',
                    title: '兄弟姐妹个数',
                    sortable: true,
                    align: 'center'
                }, {
                    field: 'Parch',
                    title: '父母孩子个数',
                    sortable: true,
                    align: 'center'
                }, {
                    field: 'Ticket',
                    title: '船票信息',
                    sortable: true,
                    align: 'center'
                }, {
                    field: 'Fare',
                    title: '票价',
                    sortable: true,
                    align: 'center'
                }, {
                    field: 'Cabin',
                    title: '客舱号',
                    sortable: true,
                    align: 'center'
                }, {
                    field: 'Embarked',
                    title: '登船港口',
                    sortable: true,
                    align: 'center'
                }],
                queryParams: function (params) {
                    return {
                        pageSize: params.pageSize,
                        pageNumber: params.pageNumber,
                        searchText: params.searchText,
                        sortName: params.sortName,
                        sortOrder: params.sortOrder,
                        PassengerId: $('#PassengerId').val(),
                        Survived: $('#Survived').val(),
                        Pclass: $('#Pclass').val(),
                        Name: $('#Name').val(),
                        Sex: $('#Sex').val(),
                        Age: $('#Age').val(),
                        SibSp: $('#SibSp').val(),
                        Parch: $('#Parch').val(),
                        Ticket: $('#Ticket').val(),
                        Fare: $('#Fare').val(),
                        Cabin: $('#Cabin').val(),
                        Embarked: $('#Embarked').val()
                    };
                },
                onDblClickRow: function (row) {
                    window.open("/home/" + row.PassengerId);
                }
            })
        }

        $(table());
        $('#search').click(function () {
            table();
        })
        $('#clear').click(function () {
            document.getElementById('PForm').reset();
        })
    </script>
{% endblock %}